<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>笑脸</title>
		<style>
			.d1{
				width: 500px;
				height: 500px;
				/*背景颜色属性*/
				background-color: #ffa500;
				border-radius:50% ;
			}
			.d2{
				width: 300px;
				height: 300px;
				border-top: 10px solid black;
				border-left: 10px solid black;
				border-radius:  50%;
				transform: rotate(228deg);
				position:absolute;
				bottom:220px;
				left:100px;
			}
			.d3{
				width: 130px;
	            height: 130px;
	            background-color: #ffb6cf;
			    border-radius: 50%;
			    position: absolute;
				top: 210px;
			}
			.d3-left {
			            left: 350px;
			        }
			.d3-right {
			            right: 1150px;
					}
			.d4 {
			width: 170px;
			height: 40px;
			background-color: #ffffff;
			border-radius: 30%;
			position: absolute;
			top: 150px;
			        }
			.d4-left {
			            left: 305px;
			        }
			.d4-right {
			            right: 1110px;
			        }
			.d5 {
			 width: 45px;
			 height: 45px;
			 background-color: #000000;
			 border-radius: 50%;
			 position: absolute;
			 top: 150px;
			 }
			 .d5-left{
			    left: 300px;	
			 
			}
			.d5-right{
				right: 1250px;
			}
			
		</style>
	</head>
	<body>
		<div class="d1"></div>
		<div class="d2"></div>
		<div class="d3 d3-left"></div>
		<div class="d3 d3-right"></div>
		<div class="d4 d4-left"></div>
		<div class="d4 d4-right"></div>
		<div class="d5 d5-left"></div>
		<div class="d5 d5-right"></div>
	</body>
</html>